<!--采购计划-->
<template>
 <div class="materalsComsumption">
   <div class="titlename"><b>材料消耗情况（万元）</b> </div>
   <el-date-picker
     v-model="timedata.mouth"
     type="date"
     style="margin-left: 1%;margin-bottom: 20px"
     value-format="yyyy-MM-dd"
     size="small"
     @change="getList"
     placeholder="选择日期">
   </el-date-picker>
   <el-table
     v-loading="loading"
     :data="tableData"
     style="width: 98%;margin-left: 1%">
     <el-table-column
       prop="depName"
       align="center"
       label="">
     </el-table-column>
     <el-table-column label="本日" align="center">
       <el-table-column
         prop="planDay"
         align="center"
         label="计划">
       </el-table-column>
       <el-table-column
         prop="actualDay"
         align="center"
         label="实际">
       </el-table-column>
       <el-table-column
         prop="contrastDay"
         align="center"
         label="超降">
         <template slot-scope="scope">
           <span style="color: red" v-show="scope.row.planDay/1>scope.row.actualDay/1">{{scope.row.contrastDay}}</span>
           <span style="color: seagreen" v-show="scope.row.planDay/1<scope.row.actualDay/1">{{scope.row.contrastDay}}</span>
         </template>
       </el-table-column>
     </el-table-column>
     <el-table-column label="本月" align="center">
       <el-table-column
         prop="planMouth"
         align="center"
         label="计划">
       </el-table-column>
       <el-table-column
         prop="actualMouth"
         align="center"
         label="实际">
       </el-table-column>
       <el-table-column
         prop="contrastMouth"
         align="center"
         label="超降">
         <template slot-scope="scope">
           <span style="color: red" v-show="scope.row.planMouth/1>scope.row.actualMouth/1">{{scope.row.contrastMouth}}</span>
           <span style="color: seagreen" v-show="scope.row.planMouth/1<scope.row.actualMouth/1">{{scope.row.contrastMouth}}</span>
           <span  v-show="scope.row.planMouth/1==scope.row.actualMouth/1">{{scope.row.contrastMouth}}</span>
         </template>
       </el-table-column>
     </el-table-column>
     <el-table-column label="本年" align="center">
       <el-table-column
         prop="planYear"
         align="center"
         label="计划">
       </el-table-column>
       <el-table-column
         prop="actualYear"
         align="center"
         label="实际">
       </el-table-column>
       <el-table-column
         prop="contrastYear"
         align="center"
         label="超降">
         <template slot-scope="scope">
           <span style="color: red" v-show="scope.row.planYear/1>scope.row.actualYear/1">{{scope.row.contrastYear}}</span>
           <span style="color: seagreen" v-show="scope.row.planYear/1<scope.row.actualYear/1">{{scope.row.contrastYear}}</span>
           <span  v-show="scope.row.planYear/1==scope.row.actualYear/1">{{scope.row.contrastYear}}</span>
         </template>
       </el-table-column>
     </el-table-column>
   </el-table>
 </div>
</template>

<script>

  import request from '@/utils/request'
  export default {
    name: "Role",
    data() {
      return {
        loading:false,
        timedata: {
          mouth:'',
        },
        tableData: []
      };
    },
    created() {
      var datedy = new Date(); //获取一个时间对象
      var niandy = datedy.getFullYear();  // 获取完整的年份(4位,1970)
      var yuedy = datedy.getMonth()+1;  // 获取月份(0-11,0代表1月,用的时候记得加上1)
      var ridy = datedy.getDate();  // 获取日(1-31)
      if(yuedy<9){
        yuedy = '0'+yuedy
      }
      if(ridy<9){
        ridy = '0'+ridy
      }
      this.timedata.mouth = niandy+'-'+yuedy+'-'+ridy
      this.getList()

    },
    methods: {
      getList(){
        this.loading = true;
        request({
          url: '/system/interface/consumableConsumption',
          method: 'get',
          params:this.timedata
        }).then(response => {
          this.loading = false;
          this.tableData = response.data
        });
      },


    }
  };
</script>
<style lang="scss" >
  .materalsComsumption {
    .titlename{
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 30px;

    }
  }

</style>
